<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>

</head>
<body>
     城市: <select  id="sltCity"></select>
     学校：<select  id="sltSchool"></select>
</body>
<script src="mock/cities.js"></script>
<script>

    window.onload=function (){

        var sltCity=  document.getElementById('sltCity');

        initCity();

        sltCity.onchange = sltCityChange;

    }

    function sltCityChange(){

      var selectedValue=  this.selectedOptions[0].value;

     var currentCity = cities.find(function (city){
            return city.id==selectedValue;
       });

        var sltSchool= document.getElementById('sltSchool');

        sltSchool.innerHTML='';

        for (var i = 0; i < currentCity.schools.length; i++) {

            var opt=document.createElement('option');
            opt.value = currentCity.schools[i].id;
            opt.text =  currentCity.schools[i].name;

            sltSchool.append(opt);
        }

    }

    function initCity(){
        var sltCity=  document.getElementById('sltCity');

        for (var i = 0; i < cities.length; i++) {

            // var opt='<option value="'+cities[i].id+'">'+cities[i].name+'</option>';
            //
            // sltCity.innerHTML+=opt;

            var opt=document.createElement('option');
            opt.value = cities[i].id;
            opt.text = cities[i].name;

            sltCity.append(opt);
        }

    }


</script>

</html>